<template>
  <div class="oil">
    <el-card>
      <el-link type="info"> 首页 </el-link>
      <span> / 文章列表 </span>
    </el-card>
    <el-card>
      <el-form :model="form">
        <el-form-item label="状态：">
          <el-radio-group v-model="labelStatus">
            <el-radio :label="null">全部</el-radio>
            <el-radio :label="0">草稿</el-radio>
            <el-radio :label="1">待审核</el-radio>
            <el-radio :label="2">审核通过</el-radio>
            <el-radio :label="3">审核失败</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="频道：">
          <el-select v-model="value" placeholder="请选择文章频道">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker
            v-model="value1"
            type="datetimerange"
            range-separator="=>"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="screen">筛选</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card>
      <span> 根据筛选条件共查询到 {{ allValue }} 条结果： </span>
    </el-card>
    <el-card>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="" label="封面" width="250">
          <template slot-scope="scope">
            <el-image
              style="width: 100%; height: 150px"
              :src="scope.row.cover.images[0]"
            >
              <!-- <div slot="error" /> -->
            </el-image>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题" width="400" />
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === 0" type="warning">草稿</el-tag>
            <el-tag v-if="scope.row.status === 1" type="danger">待审核</el-tag>
            <el-tag
              v-if="scope.row.status === 2"
              type="success"
            >审核通过</el-tag>
            <el-tag
              v-if="scope.row.status === 3"
              type="danger"
            >审核失败</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="pubdate" label="发布时间" />
        <el-table-column prop="read_count" label="阅读数" />
        <el-table-column prop="comment_count" label="评论数" />
        <el-table-column prop="like_count" label="点赞数" />
        <el-table-column prop="" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" circle />
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              @click="delBtn(scope.row.id)"
            />
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout="prev, pager, next" :total="1000" />
    </el-card>
  </div>
</template>

<script>
import { getChannel, userDelete, screen } from '@/api/user.js'
export default {
  name: 'Oil',
  data() {
    return {
      labelStatus: null, // 状态
      form: {
        status: '', // 状态
        oName: '', // 频道
        Time: '' // 日期
      },
      allValue: '', // 总条数
      options: [
        {
          id: '',
          name: ''
        }
      ],
      value: '', // 频道
      value1: [], // 日期选择器
      tableData: []
      // tableData: {
      //   // 表格
      //   total_count: '', // 总条数
      //   status: '', // 文章状态，0-草稿，1-待审核，2-审核通过，3-审核失败，不传为全部
      //   channel_id: '', // 不传为全部
      //   begin_pubdate: '', // 起始时间
      //   end_pubdate: '', // 截止时间
      //   page: '1', // 页码 默认为1页
      //   per_page: '', // 每页数量 不传为默认10
      //   results: [] // 数据数组
      // }
    }
  },
  created() {
    this.getChannel()
    this.screen()
  },
  methods: {
    async getChannel() {
      // 获取频道列表
      const res = await getChannel()
      this.options = res.channels
    },
    async delBtn(id) {
      // 删除
      try {
        await this.$confirm('确定删除吗？')
        await userDelete(id)
        this.getArticles() // 重新拉取数据
        this.$message.success('删除成功！')
      } catch (err) {
        console.log(err)
      }
    },
    async screen() {
      // 筛选
      const res = await screen({
        status: this.labelStatus,
        channel_id: this.value,
        begin_pubdate: this.value1[0],
        end_pubdate: this.value1[1]
        // page: 2
      })
      this.tableData = res.results
    }
  }
}
</script>

<style>
.rowM {
  margin: 15px;
}
.oil {
  padding: 25px;
}
</style>
